import React, { PureComponent } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Button, Input, Form, Card, Alert, Checkbox, Select } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './ConfirmUpload.less';

const { Option } = Select;
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;

@connect(({ course, classes, teachschedule, loading }) => ({
  course,
  classList: classes.classList,
  teacherCourse: teachschedule.teacherCourse,
  loading: loading.effects['teachschedule/fetchUserSchedule'],
}))
@Form.create()
export default class ConfirmUpload extends PureComponent {
  state = {
    courseno: '',
    classnoList: [],
  };

  componentDidMount() {
    this.props.dispatch({
      type: 'classes/fetchClassList',
    });
    this.props.dispatch({
      type: 'teachschedule/fetchUserSchedule',
    });
  }

  onSelect = record => {
    this.setState({
      courseno: record,
    })
  }
  
  onChange = checkedValues => {
    this.setState({
      classnoList: checkedValues,
    })
  };

  handleSubmit = () => {
    const { form, dispatch } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return
      form.resetFields();
      dispatch(routerRedux.push({
        pathname: '/uploadgrade',
        state: fieldsValue,
      }));
    });
  };

  render() {
    const { courseno, classnoList } = this.state;
    const { teacherCourse, classList } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 20 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 10 },
        md: { span: 8 },
      },
    };
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 20, offset: 0 },
        sm: { span: 8, offset: 7 },
      },
    };

    const options = classList.map((item) => {
      return {
        label: item.classname,
        value: item.classno,
      }
    });

    return (
      <PageHeaderLayout title="核对上传信息">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <Alert
              message="请先核对需要上传的课程信息与班级信息是否无误，若无误，点击确定，继续上传成绩"
              type="info"
              showIcon
            />
            <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
              <FormItem {...formItemLayout} label="课程号">
                {getFieldDecorator('cno', {
                  initialValue: courseno,
                  rules: [
                    {
                      required: true,
                      message: '请选择课程号',
                    },
                  ],
                })(<Input placeholder="课程号" disabled />)}
              </FormItem>
              <FormItem {...formItemLayout} label="课程名">
                {getFieldDecorator('cname', {
                  rules: [
                    {
                      required: true,
                      message: '请输入课程名',
                    },
                  ],
                })(
                  <Select placeholder="请选择课程" style={{ width: '100%' }} onSelect={this.onSelect}>
                    {teacherCourse.map(item => {
                      return (
                        <Option key={item.id} value={item.cno}>
                          {item.cname}
                        </Option>
                      );
                    })}
                  </Select>
                )
              }
              </FormItem>
              <FormItem {...formItemLayout} label="选择班级">
                {getFieldDecorator('classList', {
                  initialValue: classnoList,
                  rules: [
                    {
                      required: true,
                      message: '请选择班级',
                    },
                  ],
                })(<CheckboxGroup options={options} onChange={this.onChange} />)}
              </FormItem>
              <FormItem {...submitFormLayout} style={{ marginTop: 32, textAlign: 'center' }}>
                <Button type="primary" size="large" htmlType="submit">
                  确认无误
                </Button>
              </FormItem>
            </Form>
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
